<template>
    <div>
        <el-button @click="visible = true">按钮</el-button>
        <el-dialog v-model="visible" title="Hello world">
            <p>欢迎使用 Element</p>
        </el-dialog>


        <el-row>
            <el-col :span="24"><div class="grid-content bg-purple-dark"></div></el-col>
        </el-row>
        <el-row>
            <el-col :span="12"><div class="grid-content bg-purple"></div></el-col>
            <el-col :span="12"><div class="grid-content bg-purple-light"></div></el-col>
        </el-row>

        <div class="block">
            <span class="demonstration">默认显示颜色</span>
            <span class="wrapper">
    <el-button type="success">成功按钮</el-button>
    <el-button type="warning">警告按钮</el-button>
    <el-button type="danger">危险按钮</el-button>
    <el-button type="info">信息按钮</el-button>
  </span>
        </div>
        <div class="block">
            <span class="demonstration">hover 显示颜色</span>
            <span class="wrapper">
    <el-button :plain="true" type="success">成功按钮</el-button>
    <el-button :plain="true" type="warning">警告按钮</el-button>
    <el-button :plain="true" type="danger">危险按钮</el-button>
    <el-button :plain="true" type="info">信息按钮</el-button>
  </span>
        </div>
    </div>
</template>


<script>
    export default{
        data(){
            return{
                msg:'hello vue',
                visible:false
            }
        }
    }
</script>
